<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>欢迎页</title>
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport" />
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<link rel="stylesheet" th:href="@{/statics/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="@{/statics/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/statics/css/AdminLTE.min.css}"/>
</head>
<body>
	<section class="content-header">
			<div class="row center-block">
			<div class="col-md-3 col-sm-6 col-xs-12">
				<div class="info-box bg-aqua">
					<span class="info-box-icon"><i class="fa fa-tachometer"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">短网址记录数</span>
						<span
							class="info-box-number"> <span th:text="${countDWZ}">0</span>
							<small>个</small>
						</span>
						<div class="progress">
							<div class="progress-bar"  th:style="'width: ' + ${totalRate} + '%'"></div>
						</div>
						<span class="progress-description" th:text="'短网址总使用率 ' + ${totalRate} + '%'">短网址总使用率 100.00%</span>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<div class="info-box bg-red">
					<span class="info-box-icon"><i class="fa fa-bar-chart"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">API 调用次数</span> <span
							class="info-box-number"> <span th:text="${callTotal}">0</span>
							<small>次</small>
						</span>
						<div class="progress">
							<div class="progress-bar" th:style="'width: ' + ${successRate} + '%'"></div>
						</div>
						<span class="progress-description" th:text="'API调用成功率  ' + ${successRate} + '%'">API调用成功率 90%</span>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<div class="info-box bg-yellow">
					<span class="info-box-icon "><i class="fa fa-tags"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">API模块数</span> <span
							class="info-box-number"> <span th:text="${tagsCount}">0</span>
							<small>个</small>
						</span>
						<div class="progress">
							<div class="progress-bar" style="width: 100%"></div>
						</div>
						<span class="progress-description">系统中对外开放的API的模块个数</span>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<div class="info-box  bg-green">
					<span class="info-box-icon"><i class="fa fa-line-chart"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">API总个数</span> <span
							class="info-box-number"> <span th:text="${apiCount}">0</span>
							<small>个</small>
						</span>
						<div class="progress">
							<div class="progress-bar" style="width: 100%"></div>
						</div>
						<span class="progress-description">系统中对外开放的API个数<a href="#" class="bg-green flow-left"><i class="fa fa-arrow-circle-right"></i></a></span>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="row">
		    <div class="col-md-12  col-sm-12 col-xs-12">
                 <div class="box">
                       <div class="box-header with-border">
                           <h3 class="box-title">短网址使用率</h3>
                       </div>
                       <div class="box-body" style="height:260px;">
                           <div class="row">
                                <div class="col-md-2  col-sm-2 col-xs-12">
                                   <div id="main1" style="width: 350px;height:255px;"></div>
                               </div>
                                <div class="col-md-2  col-sm-2 col-xs-12">
                                   <div id="main2" style="width: 350px;height:255px;"></div>
                               </div>
                               <div class="col-md-2  col-sm-2 col-xs-12">
                                   <div id="main3" style="width: 350px;height:255px;"></div>
                               </div>
                               <div class="col-md-2  col-sm-2 col-xs-12">
                                    <div id="main4" style="width: 350px;height:255px;"></div>
                               </div>
                                <div class="col-md-2  col-sm-2 col-xs-12">
                                    <div id="main5" style="width: 350px;height:255px;"></div>
                               </div>
                           </div>
                       </div>
				</div>
		   </div>
	 	</div>
		<div class="row">
               <div class="col-md-12  col-sm-12 col-xs-12">
                   <div class="box">
                       <div class="box-header with-border">
                           <h3 class="box-title">API调用报表（七天之内）</h3>
                       </div>
                       <div class="box-body">
                           <div class="row">
                               <div class="col-md-7  col-sm-7 col-xs-12">
                                   <div id="lineChart" style="height: 300px;"></div>
                               </div>
                               <div class="col-md-5  col-sm-5 col-xs-12">
                                   <div id="pieChart" style="height: 300px;"></div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
	</section>
</body>
<script th:src="@{/statics/libs/jquery.min.js}"></script>
<script th:src="@{/statics/plugins/layer/layer.js}"></script>
<script th:src="@{/statics/libs/echarts-all.js}"></script>
<script th:src="@{/statics/js/usm.js}"></script>
<script type="text/javascript" th:src="@{/statics/js/home.js}"></script>
</html>